Con el siguiente código quiero terminar con:
let capture let universalWidth = 400 let testImg = undefined function setup() { testImg = document.getElementById('test') capture = createCapture({ audio: false, video: { width: universalWidth, height: universalWidth } }) capture.size(universalWidth, universalWidth) createCanvas(universalWidth, universalWidth) } function draw() { image(capture.get(), 0, 0) testImg.src = canvas.toDataURL() }En cambio, lo que termino es:
width y height establecidos en 800Cómo puedo solucionar esto ?
Puedes ver el problema en acción aquí
Las propiedades de ancho y alto del lienzo se establecen en 800 porque está ejecutando este boceto en una pantalla de alto DPI (es decir, Apple Retina). Cuando p5.js detecta esto, establece la densidad de píxeles en 2 de forma predeterminada, por lo que toma 800 píxeles cuadrados de gráficos y los aplasta en un cuadrado de 400 "píxeles" en la pantalla. Si desea una imagen que tenga exactamente 400 píxeles reales, puede establecer la densidad de píxeles en 1 en su función de setup() : pixelDensity(1) .